<template>
	<div class="product-list">
		<!--搜索表单-->
		<div class="common-seach-wrap">
			<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="销量筛选">
					<el-select size="small" style="width:168px" v-model="searchForm.salerNumberSort" clearable placeholder="请选择">
						<el-option label="升序" value="1"></el-option>
						<el-option label="降序" value="2"></el-option>	
					</el-select>
				</el-form-item>

				<el-form-item label="商品分类">
					<el-select size="small" style="width:168px" v-model="searchForm.category_id" clearable placeholder="所有分类">
						<el-option label="全部" value="0"></el-option>
						<el-option v-for="(item, index) in categoryList" :key="index" :label="item.name"
							:value="item.category_id"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="商品名称"><el-input style="width:180px" clearable size="small" v-model="searchForm.product_name"
						placeholder="请输入商品名称"></el-input></el-form-item>

				<el-form-item label="商品编码">
					<el-input clearable style="width:180px" size="small" v-model="searchForm.sku"
					placeholder="请输入商品编码"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" icon="Search" @click="onSubmit">查询</el-button>
				</el-form-item>
				<!-- <el-form-item>
					<el-button size="small" type="primary" icon="Plus" @click="addClick"
						v-auth="'/product/product/add'">添加商品</el-button>
				</el-form-item> -->
			</el-form>
		</div>
		<div class="product-content">
			<div class="table-wrap">
				<el-table ref="proTable" size="small" :data="tableData" border style="width: 100%" v-loading="loading"
					@selection-change="handleSelectionChange">
					>
					<el-table-column type="selection" width="50" align="center" />
					<!-- <el-table-column type="index" label="序号" width="50" align="center" /> -->
					<el-table-column prop="product_name" show-overflow-tooltip label="产品" width="418px">
						<template #default="scope">
							<div class="product-info">
								<div class="pic">
									<img v-if="scope.row.image[0].file_path" v-img-url="scope.row.image[0].file_path" alt="" />
								</div>
								<div class="info">
									<div class="name">{{ scope.row.product_name }} </div>
									<div class="">商品编码：{{ scope.row.product_sku.product_no || '无' }}</div>
									<span class="price">￥{{ scope.row.product_price }}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="category.name" show-overflow-tooltip label="分类" align="center"></el-table-column>
			
					<el-table-column prop="sku" show-overflow-tooltip label="SKU规格" align="center" width="128">
						<template #default="scope">
							<div class="sku-item" v-for="(i,index) in scope.row.sku" :key="index">
								<!-- <span  class="sku-item-option ">{{ i.product_no }} </span> -->
								<span class="sku-item-option "> {{ i.spec_sku_value }}</span>
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="sku" show-overflow-tooltip label="SKU库存" align="center" width="128">
						<template #default="scope">
							<div class="sku-item" v-for="(i,index) in scope.row.sku" :key="index">
								<span  class="sku-item-option " v-if="i.unlimit == 1">不限量 </span>
								<span  class="sku-item-option " v-else> {{ i.stock_num }}</span>
							</div>
						</template>
					</el-table-column>


					<el-table-column prop="sku" show-overflow-tooltip label="SKU库位" align="center"  width="128">
						<template #default="scope">
							<div class="sku-item" v-for="(i,index) in scope.row.sku" :key="index">
								<span  class="sku-item-option " >{{ i.storehouse || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="sku" show-overflow-tooltip label="SKU保质期" align="center" width="128">
						<template #default="scope">
							<div class="sku-item" v-for="(i,index) in scope.row.sku" :key="index">
								<span  class="sku-item-option " >{{ i.shelf_life || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="sales_actual" label="实际销量" align="center" width="80"></el-table-column>
				</el-table>
			</div>
		</div>
		<!--分页-->
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
				:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
				:total="totalDataNumber"></el-pagination>
		</div>
	</div>
</template>

<script>
import {
	productList,
} from "@/api/product.js";

import {
	useUserStore
} from "@/store";

export default {
	components: {},
	data() {
		return {
			/*切换菜单*/
			activeName: "sell",
			/*切换选中值*/
			activeIndex: "0",
			/*是否正在加载*/
			loading: true,
			/*一页多少条*/
			pageSize: 10,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
			/*搜索参数*/
			searchForm: {
				product_name: "",
				category_id: "",
				sku:"",
				salerNumberSort: "",
			},
			/*列表数据*/
			tableData: [],
			/*全部分类*/
			categoryList: [],
			supplier: [],
			/*统计数据*/
			product_count: {},
			// 列表选中项
			selectedRows: [],
		};
	},
	inject: ["form"],
	created() {
		/*获取列表*/
		this.getData();
	},
	methods: {

		// 列表选中项勾选变化
		handleSelectionChange(val) {
			this.form.selectedRows = val.map((item) => item);
		},

		/*选择第几页*/
		handleCurrentChange(val) {
			let self = this;
			self.loading = true;
			self.curPage = val;
			self.getData();
		},

		/*每页多少条*/
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData();
		},

		/*获取列表*/
		getData() {
			let self = this;
			let Params = self.searchForm;
			Params.page = self.curPage;
			Params.list_rows = self.pageSize;
			Params.type = self.activeName;
			self.loading = true;
			productList(Params, true)
				.then((data) => {
					self.loading = false;
					self.tableData = data.data.list.data;
					self.categoryList = data.data.category;
					self.totalDataNumber = data.data.list.total;
					self.supplier = data.data.supplier;
					self.product_count = data.data.product_count;
				})
				.catch((error) => {
					self.loading = false;
				});
		},

		/*搜索查询*/
		onSubmit() {
			this.curPage = 1;
			this.getData();
		},

		/*打开添加*/
		// addClick() {
		// 	this.$router.push("/product/product/add");
		// },

	},
};
</script>

<style>

.sku-item {
	display: flex;
	line-height: 2;
	/* border-bottom: 1px solid #eee; */
}

.sku-item-option {
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* .el-table .cell {
	padding: 0;
}

.el-table-small .cell {
	padding: 0;
} */
</style>
